<!--
  剪映风格播放控制器组件
  参考剪映UI设计，位于时间轴下方
-->
<template>
  <div class="jianying-playback-controls">
    <!-- 左侧控制按钮 -->
    <div class="left-controls">
      <!-- 跳到开始 -->
      <n-button 
        text 
        @click="seekToStart"
        :disabled="currentTime === 0"
        class="control-btn"
      >
        <template #icon>
          <n-icon size="16"><PlaySkipBackOutline /></n-icon>
        </template>
      </n-button>
      
      <!-- 后退一帧 -->
      <n-button 
        text 
        @click="stepBackward"
        class="control-btn"
      >
        <template #icon>
          <n-icon size="16"><PlayBackOutline /></n-icon>
        </template>
      </n-button>
      
      <!-- 播放/暂停 -->
      <div class="play-btn-wrapper">
        <button
          @click="togglePlayback"
          class="play-btn"
          :class="{ 'playing': isPlaying }"
        >
          <n-icon class="play-icon" size="16">
            <component :is="isPlaying ? PauseOutline : PlayOutline" />
          </n-icon>
        </button>
      </div>
      
      <!-- 前进一帧 -->
      <n-button 
        text 
        @click="stepForward"
        class="control-btn"
      >
        <template #icon>
          <n-icon size="16"><PlayForwardOutline /></n-icon>
        </template>
      </n-button>
      
      <!-- 跳到结束 -->
      <n-button 
        text 
        @click="seekToEnd"
        :disabled="currentTime >= totalDuration"
        class="control-btn"
      >
        <template #icon>
          <n-icon size="16"><PlaySkipForwardOutline /></n-icon>
        </template>
      </n-button>
    </div>

    <!-- 中间时间显示 -->
    <div class="center-controls">
      <div class="time-display">
        <span class="current-time">{{ formatTime(currentTime) }}</span>
        <span class="time-separator">/</span>
        <span class="total-time">{{ formatTime(totalDuration) }}</span>
      </div>
    </div>

    <!-- 右侧辅助控制 -->
    <div class="right-controls">
      <!-- 循环播放 -->
      <n-button
        text
        size="small"
        @click="toggleLoop"
        :class="{ 'active': loop }"
        class="control-btn"
      >
        <template #icon>
          <n-icon size="14"><RepeatOutline /></n-icon>
        </template>
      </n-button>

      <!-- 播放速度 -->
      <n-dropdown
        :options="speedOptions"
        @select="setPlaybackSpeed"
        trigger="click"
        size="small"
      >
        <n-button text size="small" class="control-btn speed-btn">
          {{ playbackSpeed }}x
        </n-button>
      </n-dropdown>

      <!-- 音量控制 -->
      <n-popover trigger="hover" placement="top">
        <template #trigger>
          <n-button text size="small" class="control-btn">
            <template #icon>
              <n-icon size="14">
                <component :is="getVolumeIcon(volume)" />
              </n-icon>
            </template>
          </n-button>
        </template>
        <div class="volume-control">
          <n-slider
            v-model:value="volume"
            :min="0"
            :max="100"
            :step="1"
            vertical
            style="height: 60px;"
          />
        </div>
      </n-popover>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import {
  NButton,
  NIcon,
  NDropdown,
  NPopover,
  NSlider
} from 'naive-ui'
import {
  PlayOutline,
  PauseOutline,
  PlaySkipBackOutline,
  PlaySkipForwardOutline,
  PlayBackOutline,
  PlayForwardOutline,
  RepeatOutline,
  VolumeHighOutline,
  VolumeMediumOutline,
  VolumeLowOutline,
  VolumeOffOutline
} from '@vicons/ionicons5'
import { useEditorStore } from '../../stores/editor'

// 事件定义
const emit = defineEmits(['play', 'pause', 'stop'])

// 状态管理
const editorStore = useEditorStore()

// 本地状态
const volume = ref(80)

// 计算属性
const isPlaying = computed(() => editorStore.playback.isPlaying)
const currentTime = computed(() => editorStore.playback.currentTime)
const totalDuration = computed(() => editorStore.playback.totalDuration)
const playbackSpeed = computed(() => editorStore.playback.playbackSpeed)
const loop = computed(() => editorStore.playback.loop)

// 播放速度选项
const speedOptions = [
  { label: '0.25x', key: 0.25 },
  { label: '0.5x', key: 0.5 },
  { label: '0.75x', key: 0.75 },
  { label: '1x', key: 1 },
  { label: '1.25x', key: 1.25 },
  { label: '1.5x', key: 1.5 },
  { label: '2x', key: 2 }
]

// 播放控制方法
const togglePlayback = () => {
  if (isPlaying.value) {
    editorStore.pause()
    emit('pause')
  } else {
    editorStore.play()
    emit('play')
  }
}

const seekToStart = () => {
  editorStore.seekTo(0)
}

const seekToEnd = () => {
  editorStore.seekTo(totalDuration.value)
}

const stepBackward = () => {
  const newTime = Math.max(0, currentTime.value - 0.1)
  editorStore.seekTo(newTime)
}

const stepForward = () => {
  const newTime = Math.min(totalDuration.value, currentTime.value + 0.1)
  editorStore.seekTo(newTime)
}

const toggleLoop = () => {
  editorStore.playback.loop = !loop.value
}

const setPlaybackSpeed = (speed: number) => {
  editorStore.playback.playbackSpeed = speed
}

// 音量图标
const getVolumeIcon = (vol: number) => {
  if (vol === 0) return VolumeOffOutline
  if (vol < 30) return VolumeLowOutline
  if (vol < 70) return VolumeMediumOutline
  return VolumeHighOutline
}

// 时间格式化
const formatTime = (seconds: number): string => {
  const mins = Math.floor(seconds / 60)
  const secs = Math.floor(seconds % 60)
  const ms = Math.floor((seconds % 1) * 10)
  return `${mins}:${secs.toString().padStart(2, '0')}.${ms}`
}
</script>

<style lang="scss" scoped>
.jianying-playback-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: var(--component-background);
  border-top: 1px solid var(--border-color-base);
  height: 48px;
  transition: all var(--animation-duration-base);

  .left-controls {
    display: flex;
    align-items: center;
    gap: 4px;

    .control-btn {
      color: var(--text-color-secondary);
      transition: all var(--animation-duration-base);

      &:hover {
        color: var(--text-color);
        background: var(--item-hover-color);
      }

      &:disabled {
        color: var(--disabled-color);
        cursor: not-allowed;
      }
    }

    .play-btn-wrapper {
      margin: 0 8px;

      .play-btn {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: none;
        background: linear-gradient(135deg, #ff6b35, #f7931e);
        color: white;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
        position: relative;
        overflow: hidden;

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
          border-radius: 50%;
          opacity: 0;
          transition: opacity 0.2s;
        }

        &:hover {
          transform: scale(1.05);
          box-shadow: 0 4px 16px rgba(255, 107, 53, 0.4);

          &::before {
            opacity: 1;
          }
        }

        &:active {
          transform: scale(0.95);
        }

        &.playing {
          background: linear-gradient(135deg, #4ecdc4, #44a08d);
          box-shadow: 0 2px 8px rgba(78, 205, 196, 0.3);

          &:hover {
            box-shadow: 0 4px 16px rgba(78, 205, 196, 0.4);
          }
        }

        .play-icon {
          color: white;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left: 1px; /* 微调播放图标位置 */
        }

        &.playing .play-icon {
          margin-left: 0;
        }
      }
    }
  }

  .center-controls {
    .time-display {
      font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
      font-size: 13px;
      color: var(--text-color-secondary);
      font-weight: 500;

      .current-time {
        color: var(--text-color);
      }

      .time-separator {
        margin: 0 4px;
        color: var(--text-color-secondary);
        opacity: 0.6;
      }

      .total-time {
        color: var(--text-color-secondary);
        opacity: 0.8;
      }
    }
  }

  .right-controls {
    display: flex;
    align-items: center;
    gap: 4px;

    .control-btn {
      color: var(--text-color-secondary);
      transition: all var(--animation-duration-base);

      &:hover {
        color: var(--text-color);
        background: var(--item-hover-color);
      }

      &.active {
        color: var(--primary-color);
        background: var(--primary-color-hover);
      }
    }

    .speed-btn {
      min-width: 40px;
      font-size: 12px;
      font-weight: 500;
    }
  }
}

.volume-control {
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--popover-background);
  border-radius: var(--border-radius-base);
  box-shadow: var(--box-shadow-base);
}

/* 暗色主题特定样式 */
[data-theme='dark'] .jianying-playback-controls {
  background: rgba(24, 24, 24, 0.98); /* 更深的背景，与时间轴区分 */
  backdrop-filter: blur(12px);
  border-top: 2px solid rgba(255, 255, 255, 0.15); /* 更明显的边框 */
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3); /* 添加阴影增强层次感 */

  .left-controls .control-btn {
    &:hover {
      background: rgba(255, 255, 255, 0.08);
    }
  }

  .right-controls .control-btn {
    &:hover {
      background: rgba(255, 255, 255, 0.08);
    }

    &.active {
      background: rgba(23, 125, 220, 0.2);
    }
  }
}

/* 亮色主题特定样式 */
[data-theme='light'] .jianying-playback-controls {
  background: rgba(248, 249, 250, 0.98); /* 更浅的背景，与时间轴区分 */
  backdrop-filter: blur(12px);
  border-top: 2px solid rgba(0, 0, 0, 0.12); /* 更明显的边框 */
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08); /* 添加阴影增强层次感 */

  .left-controls .control-btn {
    &:hover {
      background: rgba(0, 0, 0, 0.04);
    }
  }

  .right-controls .control-btn {
    &:hover {
      background: rgba(0, 0, 0, 0.04);
    }

    &.active {
      background: rgba(24, 144, 255, 0.1);
    }
  }
}
</style>
